<template>
  <div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      class="j-table-force-nowrap"
      :scroll="{ x: true }"
      :columns="formulalistColumns"
      :dataSource="formulalistList"
      :customRow="handleRowClick"
    >
    </a-table>
    <a-table
      ref="detail"
      size="middle"
      bordered
      rowKey="id"
      class="j-table-force-nowrap"
      :scroll="{ x: true }"
      :columns="detailTable.columns"
      :dataSource="detailTable.dataSource"
    >
    </a-table>
  </div>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction } from '@api/manage'

export default {
  name: 'formulalist',
  data() {
    return {
      description: '配方清单',
      formulalistList: [],
      formulalistColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '配方年',
          align: 'center',
          dataIndex: 'formulaYear',
        },
        {
          title: '配方编码',
          align: 'center',
          dataIndex: 'formulaCode',
        },
        {
          title: '配方号',
          align: 'center',
          dataIndex: 'formulaNumber',
        },
        {
          title: '配方名称',
          align: 'center',
          dataIndex: 'formulaDefine',
        },
        {
          title: '配方类别',
          align: 'center',
          dataIndex: 'formulaCategory_dictText',
        },
        {
          title: '配方类型',
          align: 'center',
          dataIndex: 'formulaType_dictText',
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'formulaDesc_dictText',
        },
      ],
      detailTable: {
        dataSource: [],
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            },
          },
          {
            title: '物料编码',
            dataIndex: 'materialCode',
            align: 'center',
            width: 150,
          },
          {
            title: '物料名称',
            dataIndex: 'materialName',
            align: 'center',
            width: 150,
          },
          {
            title: '规格型号',
            dataIndex: 'materialSpec',
            align: 'center',
            width: 150,
          },
          {
            title: '单位',
            dataIndex: 'materialUnit_dictText',
            align: 'center',
            width: 100,
          },
          {
            title: '是否自带料',
            dataIndex: 'isSelfProvided_dictText',
            align: 'center',
            width: 120,
          },
          {
            title: '配方%',
            dataIndex: 'formulaProportion',
            align: 'center',
            width: 100,
          },
          {
            title: '实际数量',
            dataIndex: 'actualNumber',
            align: 'center',
            width: 120,
          },
          {
            title: '配方公式',
            dataIndex: 'formulaExpression',
            align: 'center',
            width: 300,
          },
        ],
      },
      url: {
        formulalistList: '/ipstslformulalist/ipsTslFormulaList/allList',
        detail: '/ipstslformulalist/ipsTslFormulaList/allItemList',
      },
    }
  },
  methods: {
    loadformulalistData(batchNumber) {
      this.formulalistList = []
      if (batchNumber) {
        getAction(this.url.formulalistList, { batchNumber: batchNumber }).then((res) => {
          if (res.success) {
            this.formulalistList = res.result.records || res.result || []
          }
        })
      }
    },
    handleRowClick(record, index) {
      if (!record) return {}
      return {
        on: {
          click: (event) => {
            if (record.id) {
              this.loadDetail({ id: record.id })
            }
          },
        },
      }
    },
    loadDetail(params) {
      getAction(this.url.detail, params).then((res) => {
        if (res.success && res.result.length > 0) {
          this.detailTable.dataSource = res.result
        }
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
::v-deep .ant-table-tbody tr {
  height: 36px !important;
}
</style>
